import React from 'react';
import {Path,Circle,G,LinearGradient} from "react-native-svg";
import Stop from "react-native-svg/elements/Stop";
import Defs from "react-native-svg/elements/Defs";


export default class GradientPath extends React.Component{

  render(){
    const {x,y,d,color,width,startX,circleStartY,circleR} = this.props;
    const stopColor1 = "rgb(255,255,0)";
    const stopColor2 = "red";

    return(
      <G>
        <Defs>
          <LinearGradient id="grad" x1={0} y1={0} x2="0%" y2="100%">
            <Stop offset="0%" stopColor={stopColor1} stopOpacity="0" />
            <Stop offset="100%" stopColor={stopColor2} stopOpacity="1" />
          </LinearGradient>
        </Defs>

        <Path
          d={d}
          stroke={"url(#grad)"}
          strokeWidth={width}
          fill="none"
        />
        <Circle
          cx={startX}
          cy={circleStartY}
          r={circleR}
          fill={stopColor1}
        />
        <Circle
          cx={x}
          cy={y}
          r={circleR}
          fill={stopColor2}
        />
      </G>
    )
  }
}
